<template>
 <vxe-layout-container vertical>
   <vxe-layout-header class="layout-header">
    <Query :queryConfig="QueryConfig" @QueryEvent="handleQuery"></Query>
   </vxe-layout-header>
   <vxe-layout-body class="layout-body">
    <vxe-grid ref="maingrid" v-bind="GridOptions" @cell-dblclick="handleCellDbClick">
      <template #customButtons>
        <vxe-button status='primary' content='新增' :size="componentSize" @click="handleAdd"  v-if="btnPromission.add.buttonCaption"/>
        <vxe-button status='danger' content='批量删除' :size="componentSize" @click="handleBatchDelete" v-if="btnPromission.delete.buttonCaption"/>
      </template>
      <template #operation="{ row }">
        <vxe-button :size="componentSize" mode="text" status="primary" content="编辑" @click="handleEdit(row)" v-if="btnPromission.edit.buttonCaption"/>
        <vxe-button :size="componentSize" mode="text"  status="danger" content="删除" @click="handleDelete(row)" v-if="btnPromission.delete.buttonCaption"/>
      </template>
    </vxe-grid>
    <vxe-tip status="primary">
      流程明细
    </vxe-tip>
    <vxe-grid ref="childgrid" v-bind="ChildGridOptions" >  
      <template #customTools>
        <vxe-button status='primary' circle  icon="vxe-icon-add" :size="componentSize" @click="handleChildAdd"  v-if="btnPromission.add.buttonCaption"/>
      </template>    
      <template #operation="{ row }">
        <template v-if="hasEditStatus(row)">
          <vxe-button :size="componentSize" mode="text" status="primary" @click="handleChildSave(row)" content="保存" />
          <vxe-button :size="componentSize" mode="text"  status="danger" @click="handleChildCancel" content="取消" />
        </template>
        <template v-else>
          <!-- <vxe-button :size="componentSize" mode="text" status="primary" content="上移" @click="handleChildMoveUp(row)" />
          <vxe-button :size="componentSize" mode="text"  status="primary" content="下移" @click="handleChildMoveDown(row)"/> -->
          <vxe-button :size="componentSize" mode="text" status="primary" content="编辑" @click="handleChildEdit(row)" v-if="btnPromission.edit.buttonCaption"/>
          <vxe-button :size="componentSize" mode="text"  status="danger" content="删除" @click="handleChildDelete(row)" v-if="btnPromission.delete.buttonCaption"/>
        </template>      

      </template>
    </vxe-grid>
   </vxe-layout-body>
   

   <!--数据编辑窗口-->
   <vxe-modal v-model="editModal" title="数据编辑" :width="780" :height="360">
      <vxe-form ref="editForm" v-bind="FormOptions" @submit="handleEditModalSubmit" @reset="handleEditModalReset"></vxe-form>
    </vxe-modal>
  </vxe-layout-container>

</template>
<style>
</style>
<script>
  import BaseProcess from './index.js';
  export default BaseProcess;
</script>

